<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Transfer from "./Transfer.svelte";
    import { Row } from "../Row";
    import { Col } from "../Col";
    import { Button } from "../Button";
    import dayjs from "dayjs";
    import { BothSide } from "../BothSide";

    const { Story } = defineMeta({
        title: "Components/Form/Transfer",
        component: Transfer,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    const data: any[] = [];
    for (let i = 0; i < 15; i++) {
        const disabled = Math.random() < 0.4 ? true : false;
        const obj = {
            id: i,
            disabled,
            title: "Content_" + i,
        };
        data.push(obj);
    }

    let value = $state([2, 5, 7]);
</script>

<Story name="Default">
    {#snippet template(args)}
        <Transfer width={250} height={300} {data} bind:value />
    {/snippet}
</Story>

<Story name="Filter">
    {#snippet template(args)}
        <Transfer width={250} height={300} {data} bind:value filter />
    {/snippet}
</Story>

<Story name="Render">
    {#snippet template(args)}
        <Transfer width={250} height={300} {data} bind:value filter>
            {#snippet render(item: any)}
                <BothSide><span>{item.id}</span><span>{item.title}</span></BothSide>
            {/snippet}
        </Transfer>
    {/snippet}
</Story>
